<script lang="ts" setup>
import { ref, watch, reactive, computed } from 'vue'
import UserDeptForm from './user-dept-form.vue'
const emits = defineEmits<{
    (e: 'update:visible', val: boolean): void,
    (e: 'save-success', data: any, res: any): void//保存成功回调
}>()
const props = defineProps({
    //是否显示
    visible: {
        type: Boolean,
        default: false
    },
    /**部位id */
    userDeptId: String,
    /**用户id 新增的时候使用 */
    userId: String
})

const UserDeptFormRef = ref();

//设置是否显示双向绑定
const visibleModelValue = ref(props.visible)
watch(() => props.visible, val => {
    visibleModelValue.value = val;
})
watch(visibleModelValue, val => {
    emits("update:visible", val)
})

const CmStructFormDialogState = reactive({
    dialogTitle: computed(() => props.userDeptId ? '编辑用户部门信息' : '新增用户部门信息'),
    handleClose: () => {
        visibleModelValue.value = false;
    },
    //触发表单保存
    onOkButtonClick: () => {
        UserDeptFormRef.value.save();
    },
    //保存成功触发
    onSaveSuccess: (data: any, res: any) => {
        emits("save-success", data, res)
    }
})
</script>

<template>
    <div class="jxtech-dialog-form">
        <el-dialog
            v-model="visibleModelValue"
            :title="CmStructFormDialogState.dialogTitle"
            destroy-on-close
            :before-close="CmStructFormDialogState.handleClose"
        >
            <user-dept-form
                ref="UserDeptFormRef"
                :user-dept-id="userDeptId"
                :user-id="userId"
                @save-success="CmStructFormDialogState.onSaveSuccess"
            ></user-dept-form>
            <template #footer>
                <jxtech-cancel-button @click="CmStructFormDialogState.handleClose"></jxtech-cancel-button>
                <jxtech-ok-button @click="CmStructFormDialogState.onOkButtonClick"></jxtech-ok-button>
            </template>
        </el-dialog>
    </div>
</template>